<template>
    <div class="appcontain">
        <!-- 表格展示数据 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="title" label="标题" align="center" />
            <el-table-column prop="type" label="类型" align="center" />
            <el-table-column prop="content" label="文章内容" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" align="center">
                <template #default="scoped">
                    <el-tag link type="primary" @click="handleClick(scoped.row)">修改</el-tag>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹窗 -->
        <el-dialog v-model="dialogVisible" title="修改富文本信息" width="800px" :before-close="handleClose">
            <el-form :model="formData">
                <el-form-item label="标题">
                    <el-input v-model="formData.title"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="formData.type" :disabled="true"></el-input>
                </el-form-item>
                <h3 style="font-weight: 900;">文章内容</h3>
                <QuillEditor v-model:content="content" contentType="html" :options="editorOptions"
                    style="height: 200px">
                </QuillEditor>
                <el-form-item label="图片" prop="imgUrl" style="margin-top: 20px;">
                    <image-upload v-model="formData.imgUrl" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitDate">提交</el-button>
                </div>
            </template>


        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { getAllReadReport, updateReadReport } from "@/api/classReport/readReport"
const content = ref("");
// 提交数据
const submitDate = () => {
    formData.content = content.value;
    formData.imgUrl = formData.imgUrl.join(',')
    updateReadReport(formData).then(res => {
        if(res.code == 200){
            ElMessage({
                type: 'success',
                message: '修改成功'
            });
            getList()
        }
        
    })
    dialogVisible.value = false;
};
// 表格数据
const tableData = ref([]);
// 弹窗状态和表单数据
const dialogVisible = ref(false);
const formData = reactive({
    type: null,
    title: null,
    content: null,
    imgUrl: null,
    reportId: null
});

// 富文本编辑器配置
const editorOptions = {
    theme: "snow", // 使用雪花主题
    modules: {
        toolbar: [
            ["bold", "italic", "underline", "strike"], // 文本样式
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ list: "ordered" }, { list: "bullet" }], // 列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文字方向
            [{ color: [] }, { background: [] }], // 字体颜色/背景颜色
            [{ align: [] }], // 对齐方式
            ["link", "image", "video"], // 插入链接、图片和视频
            ["clean"], // 清除格式
        ],
    },
};

// 获取表格数据
const getList = async () => {
    try {
        const res = await getAllReadReport();
        console.log(res);
        if (res.code === 200) {
            tableData.value = res.data;
        } else {
            ElMessage.error("获取数据失败");
        }
    } catch (error) {
        ElMessage.error("请求数据出错");
    }
};

// 点击修改按钮，打开弹窗并加载数据
function handleClick(row) {
    formData.reportId = row.reportId
    formData.title = row.title
    formData.type = row.type
    content.value = row.content
    formData.imgUrl = row.imgUrl.split(',');
    dialogVisible.value = true;
};

// 关闭弹窗
const handleClose = (done) => {
    ElMessageBox.confirm("确认关闭？未保存的内容将丢失")
        .then(() => done())
        .catch(() => { });
};


// 页面初始化时获取数据
onMounted(() => {
    getList();
});
</script>

<style lang="less" scoped>
.appcontain {
    margin: 30px;
}

.dialog-footer {
    text-align: right;
}
</style>
